<template>
  <div class="system-menu-container" v-loading="state.loading">
    <div class="breadcrumb-box">
      <Breadcrumb/>
    </div>

    <div class="page-main" v-if="!state.loading">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>质评关键数据</span>
                <el-button v-if="!isOpen" class="button" text @click="handleClickMore">更多<el-icon><ArrowRight /></el-icon></el-button>
                <el-button v-else class="button" text @click="handleClickMore">收起<el-icon><ArrowUp /></el-icon></el-button>
              </div>
            </template>

            <div class="card-content" :style="styles">

              <div class="card-content-inner">
                <div class="data-item" v-for="v in itemList" :key="v.key">
                  <span class="data-num">{{ v.value }}</span>
                  <span class="data-title">{{v.name}}</span>
                </div>
              </div>
            </div>
            <!-- <el-row :gutter="20">
              <el-col :span="6" v-for="(item, key) in state.card_list" class="top-col">
                <top-card :title="item.title" :lists="item.lists"></top-card>
              </el-col>
            </el-row> -->
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-card shadow="hover">
            <template #header> 组织与运行管理(患者准入)</template>
            <charts-line style="height: 530px" :lineData="state.lineData" :line_x="state.line_x"></charts-line>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header> 质评公开信息</template>
            <card-list style="height: 400px" :newsList="state.newsList"></card-list>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header> 制度分类</template>
            <charts-pie style="height: 400px" :line_x="state.pie_x" :lineData="state.pie_y"></charts-pie>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header> XXX处理率</template>
            <charts-line-col style="height: 400px" :line_x="state.line_col_x"></charts-line-col>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="qualityAssessment-overview-index">
import {storeToRefs} from 'pinia';
import {useRoutesList} from '/@/stores/routesList';
import TopCard from '/@/components/TopCard/topcard.vue';
import cardList from '/@/components/lists/card_list.vue';
import chartsLine from '/@/components/charts/line.vue';
import chartsPie from '/@/components/charts/pie.vue';
import ChartsLineCol from '/@/components/charts/line_col.vue';
import {assessmentApi} from "/@/api/dashbord/assessment";
import { ArrowRight, ArrowUp } from "@element-plus/icons-vue";
import { onMounted } from 'vue';
import { useTransitionOpen } from "./hook/index";

const { styles, isOpen, setOpen} = useTransitionOpen('.card-content-inner')
const handleClickMore = ()=>{
  // console.log(!isOpen.value)
  setOpen(!isOpen.value)
}
// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));

// 定义变量内容
const stores = useRoutesList();

function divideAndRoundUp(a, b) {
  // 验证输入是否为数字
  if (typeof a !== 'number' || typeof b !== 'number') {
    return 0;
  }

  // 验证除数是否为零
  if (b === 0) {
    return 0;
  }

  const result = Math.ceil(a / b);
  return result;
}

const state = reactive({
  loading: true,
  lineData: [
    120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210
  ],
  line_x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
  line_col_x: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
  pie_x: ['患者', '护理', '器械', '医师', '医疗安全', '数据安全', '病种'],
  pie_y: [120, 132, 101, 134, 90, 230, 210],
  newsList: [
    {
      title: '《2023日间手术中心科室简介》',
      subtitle: 'PO-2345667',
    },
    {
      title: '《2023日间手术中心科室简介》',
      subtitle: 'PO-2345667',
    },
    {
      title: '《2023日间手术中心科室简介》',
      subtitle: 'PO-2345667',
    },
    {
      title: '《2023日间手术中心科室简介》',
      subtitle: 'PO-2345667',
    },
    {
      title: '《2023日间手术中心科室简介》',
      subtitle: 'PO-2345667',
    },
  ],
  tableData: {
    data: [],
    loading: true,
  },
  card_list: [

  ],
});

const keySort = [
  'zzq', 
  'yccy', 
  // 'fjh', 
  'cancel', 
  'myd',
  // 'mzpg',
  'h_sfl',
  'w_sfl',
  'm_sfl', 
  // 'lyqpg'
]
const keyMap = {
  zzq:{
    name:"日间手术占择期手术的比例",
    value:"0%"
  },
  yccy:{
    name:"延迟出院率",
    value:"0%"
  },
  fjh:{
    name: "非计划再手术率",
    value: "0%"
  },
  cancel:{
    name: "日间手术临时取消率",
    value: "0%"
  },
  myd:{
    name: "日间手术患者整体服务满意度",
    value: "0%"
  },
  mzpg:{
    name: "全麻患者入院前完成麻醉评估率",
    value: "0%"
  },
  h_sfl:{
    name: "日间手术术后24小时内完成随访率",
    value: "0%"
  },
  w_sfl:{
    name: "日间手术出院后7天内完成随访率",
    value: "0%"
  },
  m_sfl:{
    name: "日间手术术后30天内完成随访率",
    value: "0%"
  },
  lyqpg:{
    name: "日间手术患者离院前完成评估率",
    value: "0%"
  },
}
const itemList = ref([])

const getData = async () =>{
  try {
    
    state.loading = true
    const apiContext = assessmentApi()
    const [data1, data2, data3] = await Promise.all([apiContext.getDataCount1(), apiContext.getDataCount2(), apiContext.getDataCount3()])

    itemList.value = keySort.map(v=>{
      const value = data1.data[v] || data2.data[v] || data3.data[v]
      const data = { ...keyMap[v], value:  value || '0%', key: v }
      return data
    })
  }catch(e){
    itemList.value = keySort.map(v => {
      const value = ''
      const data = { ...keyMap[v], value: value || '0%', key: v }
      return data
    })
  } finally {
    state.loading = false
  }
}



const getAssessment = () => {
  state.loading = true
  assessmentApi().getAssessment().then(res => {
    console.log("res.data.knowledgeBase", res.data.daytimeList)

    state.card_list.push({
      lists: [
        {title: res.data.knowledgeBase.knowledgeBaseThisYearCount, name: '本年度'},
        {title: res.data.knowledgeBase.knowledgeBaseAllCount, name: '历史'},
      ],
      title: '管理工作制度',
    })

    state.card_list.push({
      lists: [
        {title: divideAndRoundUp(res.data.daytimeList.thisMonth / res.data.daytimeList.thisMonthAll) + "%", name: '本月'},
        {title: divideAndRoundUp(res.data.daytimeList.thisYear / res.data.daytimeList.thisYearAll) + "%", name: '本年'},
        {title: divideAndRoundUp(res.data.daytimeList.subYear / res.data.daytimeList.subYearAll) + "%", name: '去年'},
      ],
      title: '手术占折期比例',
    })

    state.card_list.push({
      lists: [
        {title: divideAndRoundUp(res.data.dischargeList.thisMonth / res.data.dischargeList.thisMonthAll) + "%", name: '本月'},
        {title: divideAndRoundUp(res.data.dischargeList.thisYear / res.data.dischargeList.thisYearAll) + "%", name: '本年'},
        {title: divideAndRoundUp(res.data.dischargeList.subYear / res.data.dischargeList.subYearAll) + "%", name: '去年'},
      ],
      title: '取消手术率',
    })
    state.card_list.push({
      lists: [
        {title: divideAndRoundUp(res.data.daytimeOperationList.daytimeOperationCount), name: '手术总量'},
        {title: divideAndRoundUp(res.data.daytimeOperationList.daytimeOperationThisMonth), name: '本月手术量'},
        {title: divideAndRoundUp(res.data.daytimeOperationList.daytimeOperationSubMonth), name: '上月手术量'},
      ],
      title: '日间手术量',
    })
    state.pie_x = res.data.categoryList.map(item => item.name)
    state.pie_y = res.data.categoryList.map(item => item.count)
    state.lineData = Object.values(res.data.monthList)
    state.loading = false
  });
};
// 页面加载时
onMounted(() => {
  // getAssessment()
  getData()
});
</script>

<style lang="scss" scoped>
.system-menu-container {
  min-height: 100%;
}
:deep() .top-col {
  width: 20% !important;
  max-width: 20% !important;
}

:deep() .el-row:not(:first-child) {
  margin-top: 15px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-content {
  overflow: hidden;
  transition: height 0.3s;
}
.card-content--open {
  height: 300px;
  transition: height 0.3s;
}
.card-content-inner {
  // display: flex;
  // flex-wrap: wrap;
  display: grid;
  grid-template-columns: repeat(6, minmax(200px, 1fr));
  row-gap: 10px;
  column-gap: 10px;
  // align-items: flex-start;
  // align-content: flex-start;
  justify-content: center;
  .data-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(to right, rgb(96, 178, 251), rgb(100, 133, 246));
    color: #fff;
    border-radius: 8px;
    padding: 20px 0;
    
    .data-num {
      font-size: 30px;
    }
    .data-title {
      font-size: 14px;
      margin-top: 10px;
    }
  }
}

@media screen and (max-width: 2000px) {
    .card-content-inner {
      grid-template-columns: repeat(5, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 1600px) {
    .card-content-inner {
      grid-template-columns: repeat(4, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 1300px) {
    .card-content-inner {
      grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 800px) {
    .card-content-inner {
      grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}
@media screen and (max-width: 530px) {
    .card-content-inner {
      grid-template-columns: repeat(1, minmax(200px, 1fr));
    }
}
</style>
